<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>demo</title>
    <style>
      .con div {
        width: 200px;
        height: 200px;
        border: 1px solid #000;
      }
      .active {
        background: #58bc58;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div>
        <div class="title">
          <input
            v-for="(item, index) in title"
            type="button"
            :value="item"
            :class="{active:index == currenIndex}"
            @click="currenIndex=index"
          />
          <!-- <input type="button" value="体育" />
          <input type="button" value="娱乐" />
          <input type="button" value="科技" /> -->
        </div>
        <div class="con">
          <!-- <div v-show="currenIndex==0">新闻</div>
          <div v-show="currenIndex==1">体育</div>
          <div v-show="currenIndex==2">娱乐</div>
          <div v-show="currenIndex==3">科技</div> -->
          <div v-for="(item, index) in cons" v-show="index==currenIndex">
            {{ item }}
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: {
        title: ["新闻", "体育", "娱乐", "科技"],
        cons: ["新闻列表", "体育列表", "娱乐列表", "科技列表"],
        currenIndex: 0,
      },

      methods: {
        change(index) {
          console.log(index);
          this.currenIndex = index; //标题改变的关键
        },
      },
    });
  </script>
</html>
